<template>
  <!-- 拍照搜题操作教程页面 -->
  <NavBar title="操作教程" color="#fff" colorText="#333" brg="#f8f8f8">
  <view class="photo-search-container">
    
    <!-- 主要内容区域 - 白色卡片 -->
    <view class="main-content">
      <image class="tishi" :src="searchBannerUrl" mode="scaleToFill"></image>
    </view>
    
  </view>
  </NavBar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getPostersConfig } from '../../utils/config.js'

// 响应式数据
const searchBannerUrl = ref('') // 默认图片

// 获取公共配置中的搜索横幅图片
const fetchSearchBanner = async () => {
  try {
    const postersConfig = await getPostersConfig()
    if (postersConfig?.search_banner) {
      searchBannerUrl.value = postersConfig.search_banner
      console.log('搜索横幅图片更新:', searchBannerUrl.value)
    }
  } catch (error) {
    console.error('获取搜索横幅图片失败:', error)
    // 保持使用默认图片
  }
}

// 页面加载时获取配置
onMounted(() => {
  fetchSearchBanner()
})
</script>

<style scoped>
.photo-search-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #C2DDFF 0%, #FFFFFF 100%);
  padding-top: 160rpx;
}

.phone-demo-img {
  width: 240rpx;
  height: 260rpx;
  border-radius: 12rpx;
  object-fit: cover;
}
/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 100;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.back-arrow {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.app-icono-img{
	width: 122rpx;
	height: 122rpx;
}
.status-center {
  flex: 1;
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #1A1A1A;
  opacity: 0.8;
}

/* 主要内容区域 */
.main-content {
  margin:20rpx 30rpx 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 40rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1324rpx;
}

/* 提示网格 */
.tips-grid {
  display: flex;
  flex-direction: column;
  padding: 20rpx 20rpx;
  box-sizing: border-box;
}

.tips-row {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.tip-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}
.phone-demo-zc{
	width: 332rpx;
	height: 356rpx;
}
.phone-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.phone-horizontal {
  width: 80rpx;
  height: 120rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}

.phone-tilted {
  width: 60rpx;
  height: 100rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(15deg);
}

.phone-vertical {
  width: 60rpx;
  height: 100rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-screen {
  font-size: 24rpx;
}

.wrong-mark {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  font-size: 40rpx;
  color: #ff4444;
  font-weight: bold;
}

.correct-mark {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  font-size: 40rpx;
  color: #00aa00;
  font-weight: bold;
}

.tip-button {
  padding: 12rpx 15rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: none;
  text-align: center;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;
}

.wrong-button {
  background: #ff4444;
  color: white;
}

.correct-button {
  background: #00aa00;
  color: white;
}
.correct-tip{
	margin-top: 130rpx;
}
.tishi{
	width: 602rpx;
	height: 1208rpx;
}
</style>
